<template>
  <div class="activity">
    <el-button
      type="primary"
      style="float: left; position: fixed; left: 0; bottom: 0"
      :disabled="current == 1 ? true : false"
      @click="back"
    >
      上一页
    </el-button>
    <el-button
      type="primary"
      style="float: right; position: fixed; right: 0; bottom: 0"
      :disabled="
        current == Math.ceil(this.total / this.size)
          ? true
          : false || total == 0
      "
      @click="next"
    >
      下一页
    </el-button>
    <el-card>
      <div>
        <span class="header">婚恋网在线活动</span>
      </div>
      <div v-for="(item, index) in activityList" :key="index" class="item" style="cursor: pointer">
        <hr />
        <div @click="showInfo(item.activityId)">
          <el-row :gutter="24">
            <el-col :span="2">
              <el-avatar
                style="width: 80px; height: 80px"
                :src="item.activityUrl"
              ></el-avatar>
            </el-col>
            <el-col :span="12" style="float: left">
              <span class="head" style="cursor: pointer"
                >{{item.activityName}}</span
              ><br />
              <span style="font-size: 14px; color: rgb(153, 153, 153)"
                >{{item.activityName}}</span
              >
            </el-col>
            <el-col :span="2" style="text-align: center">
              <br />
              <span style="color: rgb(105, 105, 105)">参与人数</span><br />
              <span>{{item.joinNumber}}</span>
            </el-col>
            <el-col style="text-align: right" :span="6">
              <br />
              <span style="color: rgb(105, 105, 105)">起止时间</span><br />
              <span style="margin-right: 15px">永久</span>
            </el-col>
            <el-col :span="2">
              <el-button type="success" size="small">进行中</el-button>
            </el-col>
          </el-row>
        </div>
        <hr />
      </div>
    </el-card>
  </div>
</template>

<script>
import activity from "@/api/activity"

export default {
  data() {
    return {
      activityList: [],
      joinList: [],
      current: 1,
      size: 4,
      total: 0,
    };
  },

  created() {
    this.init();
  },

  methods: {
    init() {
      activity.getActivityPageVo(this.current, this.size).then((res) => {
        if ( res.success ) {
          this.activityList = res.data.activityList
          this.total = res.data.total
        }
      });
    },
    back() {
      this.current -= 1
      this.init()
    },
    next() {
      this.current += 1 
      this.init()
    },
    showInfo(id) {
      this.$router.push({path: "/activityInfo", query: {id: id}})
    }
  },
};
</script>

<style scoped>
.activity {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
}
.header {
  text-align: center;
  font-weight: bold;
  font-size: large;
  margin-left: 45%;
}
.head {
  font-size: 20px;
  color: rgb(13, 113, 187);
}
.head:hover {
  font-size: 20px;
  color: rgb(0, 191, 255);
}
.item:hover {
  background-color: rgb(246, 249, 250);
}
</style>